<div class="example-container">
  <h4>Checkbox configuration</h4>
  <div>
    <section class="example-section">
      <mat-checkbox class="example-margin" [(ngModel)]="checked">Checked</mat-checkbox>
      <mat-checkbox class="example-margin" [(ngModel)]="indeterminate">Indeterminate</mat-checkbox>
    </section>

    <section class="example-section">
      <label class="example-margin">Align:</label>
      <mat-radio-group [(ngModel)]="labelPosition">
        <mat-radio-button class="example-margin" value="after">After</mat-radio-button>
        <mat-radio-button class="example-margin" value="before">Before</mat-radio-button>
      </mat-radio-group>
    </section>

    <section class="example-section">
      <mat-checkbox class="example-margin" [(ngModel)]="disabled">Disabled</mat-checkbox>
    </section>
  </div>
</div>
<div class="example-container">
  <h4>Result</h4>
  <div>
    <section class="example-section">
      <mat-checkbox class="example-margin" [(ngModel)]="checked" [(indeterminate)]="indeterminate" [labelPosition]="labelPosition"
        [disabled]="disabled">
        I'm a checkbox
      </mat-checkbox>
    </section>
  </div>
</div>
<div class="example-container">
  <h4>Multi Checkbox</h4>
  <div>
    <mat-checkbox
        style="margin-right: 20px;"
        *ngFor="let user of users"
        name="selectedUser"
        [checked]="selectedUser.indexOf(user) > -1"
        (change)="checkboxChanged(user, $event.checked)"
        >
      {{user.name}}
    </mat-checkbox>
  </div>
</div>
